Menus

Menus

A Menu offers a list of actions or functions that a user can access.

Dropdown

Preview

No content has been added for this component.

No content has been added for this component.

<div class="slds-dropdown-trigger slds-dropdown-trigger_click slds-is-open">
  <button class="slds-button slds-button_icon slds-button_icon-border-filled" aria-haspopup="true" title="Show More">
    <svg class="slds-button__icon" aria-hidden="true">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
    </svg>
    <span class="slds-assistive-text">Show More</span>
  </button>
  <div class="slds-dropdown slds-dropdown_left">
    <ul class="slds-dropdown__list" role="menu">
      <li class="slds-dropdown__item" role="presentation">
        <a href="javascript:void(0);" role="menuitem" tabindex="0">
          <span class="slds-truncate" title="Menu Item One">Menu Item One</span>
        </a>
      </li>
      <li class="slds-dropdown__item" role="presentation">
        <a href="javascript:void(0);" role="menuitem" tabindex="-1">
          <span class="slds-truncate" title="Menu Item Two">Menu Item Two</span>
        </a>
      </li>
      <li class="slds-dropdown__item" role="presentation">
        <a href="javascript:void(0);" role="menuitem" tabindex="-1">
          <span class="slds-truncate" title="Menu Item Three">Menu Item Three</span>
        </a>
      </li>
      <li class="slds-has-divider_top-space" role="separator"></li>
      <li class="slds-dropdown__item" role="presentation">
        <a href="javascript:void(0);" role="menuitem" tabindex="-1">
          <span class="slds-truncate" title="Menu Item Four">Menu Item Four</span>
        </a>
      </li>
    </ul>
  </div>
</div>

About Dropdown

Icons can be included on either the right, left, or both sides of an option.

When using icons (e.g. checkmarks) to indicate selected state:

  • all selectable items should contain an icon
  • icons of non-selected are hidden by default
  • a selected item reveals its icon when aria-checked="true" is applied to its menuitemcheckbox or menuitemradio child (e.g. <a role="menuitemcheckbox" aria-checked="true" ...>).

About Menus

The unordered menu list with [role="menu"] should be contained in a <div> with the class .slds-dropdown. The exception to this is the Action Overflow for Touch, which not a dropdown menu.

The target HTML element and dropdown need to be wrapped in the class .slds-dropdown-trigger dropdown-trigger--click.

By default, dropdown menus do not display a nubbin (the little cute triangle pointing at your target). If you want to apply one, you can add the class that defines the nubbin position and .slds-nubbin--top to the .slds-dropdown HTML element.

Accessibility

The main thing that distinguishes menus from other popover blocks is keyboard navigation: elsewhere, users press the Tab key to navigate through actionable items, but in a menu, users press the arrow keys to navigate.

Expected markup:

  • Menu trigger is a focusable element (<a> or <button>) with aria-haspopup="true"
  • Menu has role="menu" and an aria-labelledby attribute whose value is the id of the menu trigger
  • Menu items have role="menuitem", role="menuitemcheckbox", or role="menuitemradio"

Expected keyboard interactions:

  • Arrow keys cycle focus through menu items (you should use JS to disable focus for any disabled items)
  • Tab key closes menu and moves focus to the next focusable element on the page
  • Esc key closes menu and moves focus back to the menu trigger
  • Any character key moves focus to the next menu item that starts with that character, if applicable

Overview of CSS Classes

Selector.slds-dropdown-trigger
Summary

Initializes a trigger element around the dropdown

Restrictdiv, span, li
VariantTrue
Selector.slds-dropdown-trigger_hover
Summary

If someone is using javascript for click to toggle - this modifier will help

Restrict.slds-dropdown-trigger
Selector.slds-dropdown-trigger_click
Summary

If someone is using javascript for click to toggle - this modifier will help

Restrict.slds-dropdown-trigger
Selector.slds-is-open
Summary

Opens dropdown menu when invoked on click

Restrict.slds-dropdown-trigger_click
ModifierTrue
Selector.slds-dropdown
Summary

Initializes dropdown

Restrict.slds-dropdown-trigger div, .slds-dropdown-trigger ul
Selector.slds-dropdown_left
Summary

Positions dropdown to left side of target

Restrict.slds-dropdown
ModifierTrue
Selector.slds-dropdown_right
Summary

Positions dropdown to right side of target

Restrict.slds-dropdown
ModifierTrue
Selector.slds-dropdown_bottom
Summary

Positions dropdown to above target

Restrict.slds-dropdown
ModifierTrue
Selector.slds-dropdown_xx-small
Summary

Sets min-width of 6rem/96px

Restrict.slds-dropdown
ModifierTrue
Selector.slds-dropdown_x-small
Summary

Sets min-width of 12rem/192px

Restrict.slds-dropdown
ModifierTrue
Selector.slds-dropdown_small
Summary

Sets min-width of 15rem/240px

Restrict.slds-dropdown
ModifierTrue
Selector.slds-dropdown_medium
Summary

Sets min-width of 20rem/320px

Restrict.slds-dropdown
ModifierTrue
Selector.slds-dropdown_large
Summary

Sets min-width of 25rem/400px

Restrict.slds-dropdown
ModifierTrue
Selector.slds-dropdown_length-5
Summary

Forces overflow scrolling after 5 list items

Restrict.slds-dropdown, .slds-dropdown__list
ModifierTrue
Selector.slds-dropdown_length-7
Summary

Forces overflow scrolling after 7 list items

Restrict.slds-dropdown, .slds-dropdown__list
ModifierTrue
Selector.slds-dropdown_length-10
Summary

Forces overflow scrolling after 10 list items

Restrict.slds-dropdown, .slds-dropdown__list
ModifierTrue
Selector.slds-dropdown_length-with-icon-5
Summary

Forces overflow scrolling after 5 list items with an icon

Restrict.slds-dropdown, .slds-dropdown__list
ModifierTrue
Selector.slds-dropdown_length-with-icon-7
Summary

Forces overflow scrolling after 7 list items with an icon

Restrict.slds-dropdown, .slds-dropdown__list
ModifierTrue
Selector.slds-dropdown_length-with-icon-10
Summary

Forces overflow scrolling after 10 list items with an icon

Restrict.slds-dropdown, .slds-dropdown__list
ModifierTrue
Selector.slds-dropdown_inverse
Summary

Theme

Restrict.slds-dropdown
ModifierTrue
Selector.slds-dropdown__header
Summary

Adds padding to area above dropdown menu list

Restrict.slds-dropdown li
Selector.slds-dropdown__item
Summary

Initializes dropdown item

Restrict.slds-dropdown li
Selector.slds-icon_selected
Summary

If menu contains menuitemcheckbox then this toggles the selected icon when it is selected

Restrict.slds-dropdown__item svg
Selector.slds-is-selected
Summary

If menu contains menuitemcheckbox then this handles the selected states

Restrict.slds-dropdown__item
ModifierTrue
Selector.slds-nubbin_top
Summary
Restrict.slds-popover, .slds-dropdown
ModifierTrue
Selector.slds-nubbin_top-left
Summary
Restrict.slds-popover, .slds-dropdown
ModifierTrue
Selector.slds-nubbin_top-right
Summary
Restrict.slds-popover, .slds-dropdown
ModifierTrue
Selector.slds-nubbin_bottom
Summary
Restrict.slds-popover, .slds-dropdown
ModifierTrue
Selector.slds-nubbin_bottom-left
Summary
Restrict.slds-popover, .slds-dropdown
ModifierTrue
Selector.slds-nubbin_bottom-right
Summary
Restrict.slds-popover, .slds-dropdown
ModifierTrue
Selector.slds-nubbin_left
Summary
Restrict.slds-popover, .slds-dropdown
ModifierTrue
Selector.slds-nubbin_left-top
Summary
Restrict.slds-popover, .slds-dropdown
ModifierTrue
Selector.slds-nubbin_left-bottom
Summary
Restrict.slds-popover, .slds-dropdown
ModifierTrue
Selector.slds-nubbin_right
Summary
Restrict.slds-popover, .slds-dropdown
ModifierTrue
Selector.slds-nubbin_right-top
Summary
Restrict.slds-popover, .slds-dropdown
ModifierTrue
Selector.slds-nubbin_right-bottom
Summary
Restrict.slds-popover, .slds-dropdown
ModifierTrue